<template>
  <div class="transfer-rules">
    <!-- 面包屑导航 -->
    <a-breadcrumb class="breadcrumb">
      <a-breadcrumb-item>
        <router-link to="/salvation">超度与救赎</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        <router-link to="/salvation/merit-transfer">功德转移系统</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>转移规则</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="page-title">功德转移规则</div>
        <div class="page-subtitle">设定和管理功德转移的各种规则和限制</div>
      </div>
      <div class="header-actions">
        <a-button type="primary" @click="addRule">
          <PlusOutlined />
          新增规则
        </a-button>
      </div>
    </div>

    <!-- 规则统计 -->
    <div class="rules-stats">
      <a-row :gutter="[20, 20]">
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <SettingOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ rulesStats.activeRules }}</div>
              <div class="stat-label">活跃规则</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <ExclamationCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ rulesStats.violations }}</div>
              <div class="stat-label">今日违规</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <CheckCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ rulesStats.compliance }}%</div>
              <div class="stat-label">合规率</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <ThunderboltOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ rulesStats.autoExecuted }}</div>
              <div class="stat-label">自动执行</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 规则类型导航 -->
    <div class="rules-navigation">
      <a-tabs v-model:activeKey="activeTab" @change="handleTabChange">
        <a-tab-pane key="transfer" tab="转移规则">
          <div class="rules-content">
            <a-table :columns="transferColumns" :data-source="transferRules" :pagination="false" row-key="id">
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'status'">
                  <a-tag :color="getStatusColor(record.status)">
                    {{ record.status }}
                  </a-tag>
                </template>
                <template v-if="column.key === 'priority'">
                  <a-tag :color="getPriorityColor(record.priority)">
                    {{ record.priority }}
                  </a-tag>
                </template>
                <template v-if="column.key === 'actions'">
                  <a-space>
                    <a-button type="link" size="small" @click="editRule(record)"> 编辑 </a-button>
                    <a-switch :checked="record.status === '启用'" @change="toggleRule(record)" size="small" />
                  </a-space>
                </template>
              </template>
            </a-table>
          </div>
        </a-tab-pane>

        <a-tab-pane key="limit" tab="限制规则">
          <div class="rules-content">
            <a-table :columns="limitColumns" :data-source="limitRules" :pagination="false" row-key="id">
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'status'">
                  <a-tag :color="getStatusColor(record.status)">
                    {{ record.status }}
                  </a-tag>
                </template>
                <template v-if="column.key === 'severity'">
                  <a-tag :color="getSeverityColor(record.severity)">
                    {{ record.severity }}
                  </a-tag>
                </template>
                <template v-if="column.key === 'actions'">
                  <a-space>
                    <a-button type="link" size="small" @click="editRule(record)"> 编辑 </a-button>
                    <a-switch :checked="record.status === '启用'" @change="toggleRule(record)" size="small" />
                  </a-space>
                </template>
              </template>
            </a-table>
          </div>
        </a-tab-pane>

        <a-tab-pane key="auto" tab="自动化规则">
          <div class="rules-content">
            <a-table :columns="autoColumns" :data-source="autoRules" :pagination="false" row-key="id">
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'status'">
                  <a-tag :color="getStatusColor(record.status)">
                    {{ record.status }}
                  </a-tag>
                </template>
                <template v-if="column.key === 'frequency'">
                  <a-tag color="blue">
                    {{ record.frequency }}
                  </a-tag>
                </template>
                <template v-if="column.key === 'actions'">
                  <a-space>
                    <a-button type="link" size="small" @click="editRule(record)"> 编辑 </a-button>
                    <a-switch :checked="record.status === '启用'" @change="toggleRule(record)" size="small" />
                  </a-space>
                </template>
              </template>
            </a-table>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>

    <!-- 新增/编辑规则模态框 -->
    <a-modal v-model:open="showRuleModal" :title="isEditing ? '编辑规则' : '新增规则'" width="800px" @ok="submitRule" :confirmLoading="loading">
      <a-form :model="ruleForm" :rules="formRules" layout="vertical" ref="formRef">
        <a-form-item label="规则类型" name="type" required>
          <a-radio-group v-model:value="ruleForm.type" @change="handleRuleTypeChange">
            <a-radio value="transfer">转移规则</a-radio>
            <a-radio value="limit">限制规则</a-radio>
            <a-radio value="auto">自动化规则</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="规则名称" name="name" required>
          <a-input v-model:value="ruleForm.name" placeholder="请输入规则名称" />
        </a-form-item>

        <a-form-item label="规则描述" name="description" required>
          <a-textarea v-model:value="ruleForm.description" :rows="3" placeholder="请详细描述规则内容" />
        </a-form-item>

        <!-- 转移规则特有字段 -->
        <template v-if="ruleForm.type === 'transfer'">
          <a-row :gutter="16">
            <a-col :span="8">
              <a-form-item label="最小金额" name="minAmount" required>
                <a-input-number v-model:value="ruleForm.minAmount" :min="0" placeholder="最小金额" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="最大金额" name="maxAmount" required>
                <a-input-number v-model:value="ruleForm.maxAmount" :min="1" placeholder="最大金额" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="手续费率" name="feeRate" required>
                <a-input-number v-model:value="ruleForm.feeRate" :min="0" :max="1" :step="0.01" placeholder="手续费率" style="width: 100%" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item label="优先级" name="priority" required>
            <a-select v-model:value="ruleForm.priority" placeholder="请选择优先级">
              <a-select-option value="紧急">紧急</a-select-option>
              <a-select-option value="高">高</a-select-option>
              <a-select-option value="中">中</a-select-option>
              <a-select-option value="低">低</a-select-option>
            </a-select>
          </a-form-item>
        </template>

        <!-- 限制规则特有字段 -->
        <template v-if="ruleForm.type === 'limit'">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="限制类型" name="limitType" required>
                <a-select v-model:value="ruleForm.limitType" placeholder="请选择限制类型">
                  <a-select-option value="日限额">日限额</a-select-option>
                  <a-select-option value="月限额">月限额</a-select-option>
                  <a-select-option value="单笔限额">单笔限额</a-select-option>
                  <a-select-option value="频率限制">频率限制</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="限制值" name="limitValue" required>
                <a-input-number v-model:value="ruleForm.limitValue" :min="1" placeholder="限制值" style="width: 100%" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item label="严重级别" name="severity" required>
            <a-select v-model:value="ruleForm.severity" placeholder="请选择严重级别">
              <a-select-option value="严重">严重</a-select-option>
              <a-select-option value="中等">中等</a-select-option>
              <a-select-option value="轻微">轻微</a-select-option>
            </a-select>
          </a-form-item>
        </template>

        <!-- 自动化规则特有字段 -->
        <template v-if="ruleForm.type === 'auto'">
          <a-row :gutter="16">
            <a-col :span="8">
              <a-form-item label="触发器" name="trigger" required>
                <a-select v-model:value="ruleForm.trigger" placeholder="请选择触发器">
                  <a-select-option value="时间触发">时间触发</a-select-option>
                  <a-select-option value="事件触发">事件触发</a-select-option>
                  <a-select-option value="条件触发">条件触发</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="执行频率" name="frequency" required>
                <a-select v-model:value="ruleForm.frequency" placeholder="请选择执行频率">
                  <a-select-option value="实时">实时</a-select-option>
                  <a-select-option value="每分钟">每分钟</a-select-option>
                  <a-select-option value="每小时">每小时</a-select-option>
                  <a-select-option value="每日">每日</a-select-option>
                  <a-select-option value="每周">每周</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="执行动作" name="action" required>
                <a-select v-model:value="ruleForm.action" placeholder="请选择执行动作">
                  <a-select-option value="清算">清算</a-select-option>
                  <a-select-option value="风险检测">风险检测</a-select-option>
                  <a-select-option value="统计分析">统计分析</a-select-option>
                  <a-select-option value="数据备份">数据备份</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </template>

        <a-form-item label="状态" name="status">
          <a-radio-group v-model:value="ruleForm.status">
            <a-radio value="启用">启用</a-radio>
            <a-radio value="禁用">禁用</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useSalvationStore } from '@/stores/salvation'
import { PlusOutlined, SettingOutlined, ExclamationCircleOutlined, CheckCircleOutlined, ThunderboltOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'

const salvationStore = useSalvationStore()

// 当前活跃标签
const activeTab = ref('transfer')

// 模态框状态
const showRuleModal = ref(false)
const isEditing = ref(false)
const loading = ref(false)
const formRef = ref()
const selectedRule = ref(null)

// 表单数据
const ruleForm = ref({
  type: 'transfer',
  name: '',
  description: '',
  status: '启用',
  // 转移规则字段
  minAmount: 0,
  maxAmount: 1000,
  feeRate: 0.05,
  priority: '中',
  // 限制规则字段
  limitType: '',
  limitValue: 0,
  severity: '中等',
  // 自动化规则字段
  trigger: '',
  frequency: '',
  action: ''
})

// 表单验证规则
const formRules = {
  name: [
    { required: true, message: '请输入规则名称', trigger: 'blur' },
    { min: 2, max: 50, message: '规则名称长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入规则描述', trigger: 'blur' },
    { min: 10, max: 200, message: '规则描述长度在 10 到 200 个字符', trigger: 'blur' }
  ],
  minAmount: [{ required: true, message: '请输入最小金额', trigger: 'blur' }],
  maxAmount: [{ required: true, message: '请输入最大金额', trigger: 'blur' }],
  feeRate: [{ required: true, message: '请输入手续费率', trigger: 'blur' }],
  priority: [{ required: true, message: '请选择优先级', trigger: 'change' }],
  limitType: [{ required: true, message: '请选择限制类型', trigger: 'change' }],
  limitValue: [{ required: true, message: '请输入限制值', trigger: 'blur' }],
  severity: [{ required: true, message: '请选择严重级别', trigger: 'change' }],
  trigger: [{ required: true, message: '请选择触发器', trigger: 'change' }],
  frequency: [{ required: true, message: '请选择执行频率', trigger: 'change' }],
  action: [{ required: true, message: '请选择执行动作', trigger: 'change' }]
}

// 规则统计数据
const rulesStats = ref({
  activeRules: 15,
  violations: 3,
  compliance: 94.5,
  autoExecuted: 128
})

// 转移规则数据
const transferRules = ref([
  {
    id: 'TR001',
    name: '基础转移规则',
    description: '普通功德转移的基础规则',
    minAmount: 10,
    maxAmount: 1000,
    feeRate: 0.05,
    priority: '高',
    status: '启用',
    creator: '系统管理员',
    createTime: '2024-01-01',
    type: 'transfer'
  },
  {
    id: 'TR002',
    name: '紧急转移规则',
    description: '紧急情况下的快速转移规则',
    minAmount: 100,
    maxAmount: 5000,
    feeRate: 0.1,
    priority: '紧急',
    status: '启用',
    creator: '系统管理员',
    createTime: '2024-01-01',
    type: 'transfer'
  }
])

// 限制规则数据
const limitRules = ref([
  {
    id: 'LR001',
    name: '日转移限额',
    description: '每日功德转移的最大限额',
    limitType: '日限额',
    limitValue: 10000,
    severity: '严重',
    status: '启用',
    creator: '风控管理员',
    createTime: '2024-01-01',
    type: 'limit'
  },
  {
    id: 'LR002',
    name: '单笔转移限额',
    description: '单次转移的最大功德数量',
    limitType: '单笔限额',
    limitValue: 2000,
    severity: '中等',
    status: '启用',
    creator: '风控管理员',
    createTime: '2024-01-01',
    type: 'limit'
  }
])

// 自动化规则数据
const autoRules = ref([
  {
    id: 'AR001',
    name: '定时清算规则',
    description: '每日自动进行功德清算',
    trigger: '时间触发',
    frequency: '每日',
    action: '清算',
    status: '启用',
    lastExecution: '2024-01-15 00:00:00',
    creator: '系统管理员',
    type: 'auto'
  },
  {
    id: 'AR002',
    name: '风险检测规则',
    description: '自动检测异常转移行为',
    trigger: '事件触发',
    frequency: '实时',
    action: '风险检测',
    status: '启用',
    lastExecution: '2024-01-15 10:30:00',
    creator: '安全管理员',
    type: 'auto'
  }
])

// 转移规则表格列
const transferColumns = [
  { title: '规则ID', dataIndex: 'id', key: 'id', width: 80 },
  { title: '规则名称', dataIndex: 'name', key: 'name', width: 150 },
  { title: '最小金额', dataIndex: 'minAmount', key: 'minAmount', width: 100 },
  { title: '最大金额', dataIndex: 'maxAmount', key: 'maxAmount', width: 100 },
  { title: '手续费率', dataIndex: 'feeRate', key: 'feeRate', width: 100 },
  { title: '优先级', dataIndex: 'priority', key: 'priority', width: 80 },
  { title: '状态', dataIndex: 'status', key: 'status', width: 80 },
  { title: '创建者', dataIndex: 'creator', key: 'creator', width: 100 },
  { title: '操作', key: 'actions', width: 120 }
]

// 限制规则表格列
const limitColumns = [
  { title: '规则ID', dataIndex: 'id', key: 'id', width: 80 },
  { title: '规则名称', dataIndex: 'name', key: 'name', width: 150 },
  { title: '限制类型', dataIndex: 'limitType', key: 'limitType', width: 100 },
  { title: '限制值', dataIndex: 'limitValue', key: 'limitValue', width: 100 },
  { title: '严重级别', dataIndex: 'severity', key: 'severity', width: 100 },
  { title: '状态', dataIndex: 'status', key: 'status', width: 80 },
  { title: '创建者', dataIndex: 'creator', key: 'creator', width: 100 },
  { title: '操作', key: 'actions', width: 120 }
]

// 自动化规则表格列
const autoColumns = [
  { title: '规则ID', dataIndex: 'id', key: 'id', width: 80 },
  { title: '规则名称', dataIndex: 'name', key: 'name', width: 150 },
  { title: '触发器', dataIndex: 'trigger', key: 'trigger', width: 100 },
  { title: '执行频率', dataIndex: 'frequency', key: 'frequency', width: 100 },
  { title: '操作', dataIndex: 'action', key: 'action', width: 100 },
  { title: '状态', dataIndex: 'status', key: 'status', width: 80 },
  { title: '最后执行', dataIndex: 'lastExecution', key: 'lastExecution', width: 160 },
  { title: '操作', key: 'actions', width: 120 }
]

// 切换标签
const handleTabChange = (key) => {
  activeTab.value = key
}

// 新增规则
const addRule = () => {
  isEditing.value = false
  resetForm()
  ruleForm.value.type = activeTab.value
  showRuleModal.value = true
}

// 编辑规则
const editRule = (record) => {
  isEditing.value = true
  selectedRule.value = record

  // 根据规则类型填充表单
  ruleForm.value = {
    type: record.type,
    name: record.name,
    description: record.description,
    status: record.status,
    minAmount: record.minAmount || 0,
    maxAmount: record.maxAmount || 1000,
    feeRate: record.feeRate || 0.05,
    priority: record.priority || '中',
    limitType: record.limitType || '',
    limitValue: record.limitValue || 0,
    severity: record.severity || '中等',
    trigger: record.trigger || '',
    frequency: record.frequency || '',
    action: record.action || ''
  }

  showRuleModal.value = true
}

// 切换规则状态
const toggleRule = (record) => {
  const newStatus = record.status === '启用' ? '禁用' : '启用'

  // 更新对应数据源中的状态
  const updateRuleStatus = (rules) => {
    const index = rules.findIndex((item) => item.id === record.id)
    if (index !== -1) {
      rules[index].status = newStatus
    }
  }

  if (record.type === 'transfer') {
    updateRuleStatus(transferRules.value)
  } else if (record.type === 'limit') {
    updateRuleStatus(limitRules.value)
  } else if (record.type === 'auto') {
    updateRuleStatus(autoRules.value)
  }

  message.success(`规则已${newStatus}`)
}

// 规则类型变更处理
const handleRuleTypeChange = () => {
  // 重置特有字段
  ruleForm.value.minAmount = 0
  ruleForm.value.maxAmount = 1000
  ruleForm.value.feeRate = 0.05
  ruleForm.value.priority = '中'
  ruleForm.value.limitType = ''
  ruleForm.value.limitValue = 0
  ruleForm.value.severity = '中等'
  ruleForm.value.trigger = ''
  ruleForm.value.frequency = ''
  ruleForm.value.action = ''
}

// 重置表单
const resetForm = () => {
  ruleForm.value = {
    type: 'transfer',
    name: '',
    description: '',
    status: '启用',
    minAmount: 0,
    maxAmount: 1000,
    feeRate: 0.05,
    priority: '中',
    limitType: '',
    limitValue: 0,
    severity: '中等',
    trigger: '',
    frequency: '',
    action: ''
  }
}

// 提交规则
const submitRule = async () => {
  try {
    await formRef.value.validate()
    loading.value = true

    // 模拟API调用
    await new Promise((resolve) => setTimeout(resolve, 1500))

    if (isEditing.value) {
      // 编辑模式
      const updateRule = (rules) => {
        const index = rules.findIndex((item) => item.id === selectedRule.value.id)
        if (index !== -1) {
          rules[index] = {
            ...rules[index],
            ...ruleForm.value,
            lastUpdate: new Date().toLocaleString()
          }
        }
      }

      if (ruleForm.value.type === 'transfer') {
        updateRule(transferRules.value)
      } else if (ruleForm.value.type === 'limit') {
        updateRule(limitRules.value)
      } else if (ruleForm.value.type === 'auto') {
        updateRule(autoRules.value)
      }

      message.success('规则编辑成功')
    } else {
      // 新增模式
      const createNewRule = () => {
        const typePrefix = ruleForm.value.type === 'transfer' ? 'TR' : ruleForm.value.type === 'limit' ? 'LR' : 'AR'
        const rules = ruleForm.value.type === 'transfer' ? transferRules.value : ruleForm.value.type === 'limit' ? limitRules.value : autoRules.value

        const newId = typePrefix + String(rules.length + 1).padStart(3, '0')
        const newRule = {
          id: newId,
          ...ruleForm.value,
          creator: '当前用户',
          createTime: new Date().toISOString().split('T')[0],
          lastExecution: ruleForm.value.type === 'auto' ? '未执行' : undefined
        }

        rules.push(newRule)
      }

      createNewRule()
      message.success('规则新增成功')
    }

    showRuleModal.value = false
    resetForm()
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    loading.value = false
  }
}

// 获取状态颜色
const getStatusColor = (status) => {
  return status === '启用' ? 'success' : 'error'
}

// 获取优先级颜色
const getPriorityColor = (priority) => {
  const colors = {
    紧急: 'red',
    高: 'orange',
    中: 'blue',
    低: 'green'
  }
  return colors[priority] || 'default'
}

// 获取严重级别颜色
const getSeverityColor = (severity) => {
  const colors = {
    严重: 'red',
    中等: 'orange',
    轻微: 'blue'
  }
  return colors[severity] || 'default'
}

onMounted(() => {
  console.log('功德转移规则页面已加载')
})
</script>

<style lang="scss" scoped>
.transfer-rules {
  padding: 24px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  min-height: 100vh;
  color: #fff;

  // 面包屑导航
  .breadcrumb {
    margin-bottom: 24px;

    :deep(.ant-breadcrumb-link) {
      color: rgba(255, 255, 255, 0.8);

      &:hover {
        color: #ffd700;
      }
    }

    :deep(.ant-breadcrumb-separator) {
      color: rgba(255, 255, 255, 0.6);
    }
  }

  // 页面头部
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    .header-content {
      .page-title {
        font-size: 2rem;
        font-weight: bold;
        color: #fff;
        margin-bottom: 8px;
      }

      .page-subtitle {
        color: rgba(255, 255, 255, 0.8);
        font-size: 1rem;
      }
    }
  }

  // 规则统计
  .rules-stats {
    margin-bottom: 32px;

    .stat-card {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      transition: all 0.3s ease;

      .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        background: rgba(255, 215, 0, 0.2);
        color: #ffd700;
      }

      .stat-content {
        .stat-value {
          font-size: 1.8rem;
          font-weight: bold;
          color: #fff;
          margin-bottom: 4px;
        }

        .stat-label {
          color: rgba(255, 255, 255, 0.8);
          font-size: 0.9rem;
        }
      }
    }
  }

  // 规则导航
  .rules-navigation {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px;

    :deep(.ant-tabs) {
      .ant-tabs-tab {
        color: rgba(255, 255, 255, 0.8);

        &.ant-tabs-tab-active {
          color: #ffd700;
        }

        &:hover {
          color: rgba(255, 215, 0, 0.8);
        }
      }

      .ant-tabs-ink-bar {
        background: #ffd700;
      }

      .ant-tabs-content-holder {
        .ant-tabs-content {
          .ant-tabs-tabpane {
            color: #fff;
          }
        }
      }
    }

    .rules-content {
      margin-top: 16px;

      :deep(.ant-table) {
        background: transparent;

        .ant-table-thead > tr > th {
          background: rgba(255, 255, 255, 0.1);
          color: rgba(255, 255, 255, 0.9);
          border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        .ant-table-tbody > tr > td {
          background: transparent;
          color: rgba(255, 255, 255, 0.8);
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .ant-table-tbody > tr:hover > td {
          background: rgba(255, 255, 255, 0.05);
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .transfer-rules {
    padding: 16px;

    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;

      .header-content .page-title {
        font-size: 1.5rem;
      }
    }

    .stat-card {
      flex-direction: column;
      text-align: center;
      gap: 12px;

      .stat-content .stat-value {
        font-size: 1.5rem;
      }
    }
  }
}
</style>
